<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <title>贝格演示页面</title>

    <style>
        html, body {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 1100px;
            margin: 0 auto;
        }

        h1 {
            font-size: 36px;
            background-color: #fff;
            line-height: 100px;
            height: 100px;
            padding: 20px;
            text-align: center;
            font-family: "微软雅黑";
            padding: 0;
            margin: 0;
            -moz-box-shadow: 0px 1px 3px #ccc;
            -webkit-box-shadow: 0px 1px 3px #ccc;
            box-shadow: 0px 1px 3px #ccc;
        }

        .list {
            padding-top: 20px;
        }

        .list ul {
            border-bottom: #ddd solid 1px;
            padding: 0 0 20px 0;
            width: 100%;
            display: inline-table
        }

        .list ul img {
            width: 190px;
            height: 140px;
            float: left;
        }

        .list ul dl {
            margin-left: 210px;
        }

        .list ul dl span {
            width: 150px;
            float: right;
            display: inline-table;
            text-align: right;
            color: #999;
            font-size: 12px;
        }

        .list ul dl b {
            color: #F30;
            font-size: 18px;
            font-family: Arial, Helvetica, sans-serif;
        }

        .list ul dl dt {
            margin: 0 150px 0 0px;
            line-height: 24px;
            height: 24px;
            overflow: hidden;
            font-size: 20px;
            margin-top: -18px;
            font-family: "微软雅黑";
        }

        .list ul dl dd {
            margin: 0 150px 0 0px;
            line-height: 20px;
            font-size: 12px;
            color: #666;
            padding: 10px 0;
            height: 80px;
            overflow: hidden;
        }

        .list ul dl li {
            list-style-type: none;
            line-height: 20px;
            height: 20px;
            padding: 0px;
            margin: 0px;
            color: #999;
            font-size: 12px;
        }

        .list ul dl li i {
            font-style: normal;
            padding-right: 20px;
            color: #06C;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
        }

        .list ul dl li em {
            font-style: normal;
            padding-left: 20px;
            color: #666;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
        }

        .list ul dl li p a {
            float: left;
            height: 24px;
            line-height: 24px;
            font-size: 12px;
            border-radius: 3px;
            border: #eee solid 1px;
            margin-right: 10px;
            color: #666;
            padding: 0 10px;
            text-decoration: none;
            margin-bottom: 10px;
        }

        .list ul dl li p a:hover {
            float: left;
            height: 24px;
            line-height: 24px;
            font-size: 12px;
            border-radius: 3px;
            border: #ddd solid 1px;
            margin-right: 10px;
            color: #36C;
            padding: 0 10px;
            background-color: #f6f6f6;
            margin-bottom: 10px;
        }

        .page {
            margin: 50px auto;
            height: 100px;
            width: 500px;
        }

        .page li {
            list-style-type: none;
        }

        .page li a {
            line-height: 30px;
            height: 30px;
            padding: 0 15px;
            border: #eee solid 1px;
            border-radius: 3px;
            font-size: 14px;
            float: left;
            margin: 0 10px;
            list-style-type: none;
            color: #666;
            display: inline-table;
            text-decoration: none;
        }

        .page li a:hover {
            line-height: 30px;
            height: 30px;
            padding: 0 15px;
            border: #06C solid 1px;
            border-radius: 3px;
            font-size: 14px;
            float: left;
            margin: 0 10px;
            color: #fff;
            background-color: #06C;
            float: left;
            list-style-type: none;
        }

        .page li.active a {
            line-height: 30px;
            height: 30px;
            padding: 0 15px;
            border: #06C solid 1px;
            border-radius: 3px;
            font-size: 14px;
            float: left;
            margin: 0 10px;
            color: #fff;
            background-color: #06C;
            float: left;
            list-style-type: none;
        }

        .page li.active a:hover {
            line-height: 30px;
            height: 30px;
            padding: 0 15px;
            border: #06C solid 1px;
            border-radius: 3px;
            font-size: 14px;
            float: left;
            margin: 0 10px;
            color: #fff;
            background-color: #06C;
            float: left;
            list-style-type: none;
        }

        .page-list .pagination {
            float: left;
        }

        .page-list .pagination span {
            cursor: pointer;
        }

        .page-list .pagination .separate span {
            cursor: default;
            border-top: none;
            border-bottom: none;
        }

        .page-list .pagination .separate span:hover {
            background: none;
        }

        .page-list .page-total {
            float: left;
            margin: 25px 20px;
        }

        .page-list .page-total input, .page-list .page-total select {
            height: 26px;
            border: 1px solid #ddd;
        }

        .page-list .page-total input {
            width: 40px;
            padding-left: 3px;
        }

        .page-list .page-total select {
            width: 50px;
        }
    </style>
    <script src="//cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
    <script src="tm.pagination.js"></script>
    <script src="//cdn.bootcss.com/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>

    <script type="text/javascript">
        /*<![CDATA[*/
        var app = angular.module('app', ['tm.pagination','ui.bootstrap']);
        app.controller('MainController', function ($rootScope, $scope, $modal,$http) {
            //随机选取给定图片
            $scope.images=['pic.jpg','pic1.jpg','pic2.jpg','pic3.jpg'];
            $scope.data = {};
            $scope.rows = [];
            $scope.pageNum=1;

            $scope.count = 0;
            $scope.p_pernum = 10;
            //变量
            $scope.p_current = 1;
            $scope.p_all_page = 0;
            $scope.pages = [];
            _get($scope.p_current,$scope.p_pernum,function(){
                alert("我是第一次加载");
            });
            //获取数据
            //初始化载入数据
            function _get(page,size,callback) {
              var pageNum =page-1;
                $http({
                    url: '/findAllNews?perPage=10&pageNum=' + pageNum,
                    method: 'GET'
                }).success(function (rows) {
                    if(rows.length>0){
                        $scope.count = rows[0].num;
                        $scope.p_all_page = Math.ceil($scope.count / $scope.p_pernum);
                    }else{
                        $scope.count = 0
                        $scope.p_all_page = 0;
                    }

                    $scope.p_current = page;

                    reloadPno();
                    $scope.rows =[];
                    for (var i in rows) {
                        var row = rows[i];

                        row.labelsList = rows[i].labels.split(" ")
                        row.random = Math.random()*10;
                        row.images =  $scope.images[i%4];
                    	// row.labelsList = row.labelsList.substr(0,row.labelsList.indexOf('_')-1)
                        $scope.rows.push(row);
                    }

                });
            }
            //单选按钮选中
            $scope.select= function(id){
                alert(id);
            }
            //首页
            $scope.p_index = function(){
                $scope.load_page(1);
            }
            //尾页
            $scope.p_last = function(){
                $scope.load_page($scope.p_all_page);
            }
            //加载某一页
            $scope.load_page = function(page){
                _get(page,$scope.p_pernum,function(){ });
            };
            //初始化页码
            function reloadPno (){
                $scope.pages=calculateIndexes($scope.p_current,$scope.p_all_page,8);
            };
			//分页算法
            function calculateIndexes(current, length, displayLength) {
                var indexes = [];
                var start = Math.round(current - displayLength / 2);
                var end = Math.round(current + displayLength / 2);
                if (start <= 1) {
                    start = 1;
                    end = start + displayLength - 1;
                    if (end >= length - 1) {
                        end = length - 1;
                    }
                }
                if (end >= length - 1) {
                    end = length;
                    start = end - displayLength + 1;
                    if (start <= 1) {
                        start = 1;
                    }
                }
                for (var i = start; i <= end; i++) {
                    indexes.push(i);
                }
                return indexes;
            };

            var calculateIndexes = function (current, length, displayLength) {
                var indexes = [];
                var start = Math.round(current - displayLength / 2);
                var end = Math.round(current + displayLength / 2);
                if (start <= 1) {
                    start = 1;
                    end = start + displayLength - 1;
                    if (end >= length - 1) {
                        end = length - 1;
                    }
                }
                if (end >= length - 1) {
                    end = length ;
                    start = end - displayLength + 1;
                    if (start <= 1) {
                        start = 1;
                    }
                }
                for (var i = start; i <= end; i++) {
                    indexes.push(i);
                }
                return indexes;
            };

            //获取数据
            $scope.test = function (id) {
                $scope.getNum = $scope.rows[id];

                var modalInstance = $modal.open({
                    templateUrl: '/Content.html',//script标签中定义的id
                    controller: 'alertController',//modal对应的Controller
                    title:'弹框标题',
                    resolve: {
                        data: function () {//data作为modal的controller传入的参数
                            return $scope.getNum ;//用于传递数据
                        }
                    }
                })
            }
            //获取数据
            $scope.get = function (id) {
                $http({
                    url: '/get?id=' + id,
                    method: 'POST',
                }).success(function (data) {
                    for (var i in $scope.rows) {
                        var row = $scope.rows[i];
                        if (data.id == row.id) {
                            row.no = data.no;
                            row.date = data.date;
                            row.quantity = data.quantity;
                            return;
                        }
                    }
                    $scope.rows.push(data);
                });
            }
           function getMyDate (str){
                str = parseInt(str);
                if(str!=""||str!=null){
                    var oDate = new Date(str);
                    var oYear = oDate.getFullYear();
                    var oMonth = oDate.getMonth()+1;
                    oMonth = oMonth>=10? oMonth:'0'+oMonth;
                    var oDay = oDate.getDate();
                    oDay = oDay>=10? oDay:'0'+oDay;
                    var theDate = oYear+"-"+oMonth+"-"+oDay;
                }else{
                    theDate = "";
                }
                return theDate
            };

        });

        app.controller('alertController', function ($scope, $modalInstance, data) {
            $scope.getNum = data;
        });

        /*]]>*/
    </script>
</head>
<body ng-app="app" ng-controller="MainController">
<h1>金融监管话题列表</h1>
<div class="container">
    <div class="list" ng-repeat="row in rows">
        <ul>
            <img src="{{row.images}}"/>
            <dl>

                <span >热度：<b>{{row.random | number:1}}</b></span>
                <dt ng-click="test($index)">
                    {{row.tit}}
                </dt>
                <dd> {{row.summary.split('||')[0]}}</dd>
                <li><i>{{row.source}}</i>|<em>{{row.pubDt}}</em></li>

                <li  >
                    <div ng-repeat="label in row.labelsList">
                        <p><a href="#">{{label.substr(0,label.indexOf('_'))}}</a></p>
                    </div>

                </li>
            </dl>

        </ul>
    </div>
    <ul class="pagination" style="margin: 0px;" >
        <li ng-class="{true:'disabled'}[p_current==1]"><a href="javascript:void(0);" ng-click="p_index()">首页</a></li>
        <li ng-repeat="page in pages" ng-class="{true:'active'}[p_current==page]"><a href="javascript:void(0);" ng-click="load_page(page)">{{ page }}</a></li>
        <li ng-class="{true:'disabled'}[p_current==p_all_page]"><a href="javascript:void(0);" ng-click="p_last()">尾页</a></li>
    </ul>
    <span style="vertical-align: 12px;">  共：{{count}} 条</span>
</div>
</body>
</html>